<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>公告管理</title>
  <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
</head>
<body class="layui-layout-body" >
<div class="layui-layout layui-layout-admin">

<div class="layui-body">
	<!-- 内容主体区域 -->
	<blockquote class="layui-elem-quote">公告管理</blockquote>
	<div class="layui-form-item">
		<form id="searchForm" class="layui-form" th:action="@{/index_page/notice/list}" method="post">
			<input id="pageIndex" type="hidden" name="pageIndex" th:value="${pageIndex == null} ? '' : ${pageIndex}">
			<input id="pageSize" type="hidden" name="pageSize" th:value="${pageSize == null} ? '' : ${pageSize}">
			<div class="layui-form-item">
	      		<div class="layui-input-inline">
	        		<input name="noticeContent" class="layui-input" placeholder="公告内容" type="text" autocomplete="off"
	        			th:value="${noticeContent == null} ? '' : ${noticeContent}">
	      		</div>
	      		<div class="layui-input-inline">
	      			<select name="noticeStatus" lay-filter="aihao">
	      				<option value="" th:selected="${noticeStatus == null} ? true : false">上下架状态</option>
				        <option value="0" th:selected="${noticeStatus != null} ? ${noticeStatus == 0} : false">未上架</option>
				        <option value="1" th:selected="${noticeStatus != null} ? ${noticeStatus == 1} : false">已上架</option>
			      	</select>
	      		</div>
	      		<div class="layui-input-inline">
	      			<button id="search" class="layui-btn" lay-filter="demo1" lay-submit="">搜索</button>
	      		</div>
      		</div>
      	</form>
  	</div>
	<a th:href="@{/index_page/notice/edit}"  class="layui-btn">新增公告</a>
    <div class="layui-table-body layui-table-main">
    <table class="layui-table" >
	<!--  	<colgroup>
	    	<col width="150">
	    	<col width="200">
	    	<col>
	 	</colgroup> -->
	  	<thead>
	    	<tr>
				<th>顺序号</th>
				<th><b>公告内容</b></th>
				<th><b>排序权重</b></th>
				<th><b>状态</b></th>
				<th><b>更新时间</b></th>
				<th><b>操作人</b></th>
				<th><b>操作</b></th>
	    	</tr> 
		</thead>
	  	<tbody>
		    <tr data-th-each="notice, iterStat : ${notices}" >
		   		<td class="layui-table-cell" data-th-text="${iterStat.count}+${pageIndex-1}*${pageSize}">1</td>
			    <td class="layui-table-cell" data-th-text="${notice.content}"></td>
			    <td class="layui-table-cell" data-th-text="${notice.sort}">1</td>
			    <td class="layui-table-cell" data-th-text="${notice.status eq 1} ? '已上架':'未上架'"></td>
			    <td class="layui-table-cell" data-th-text="${#calendars.format(notice.operateTime, 'yyyy-MM-dd  HH:mm:ss')}"></td>
			    <td class="layui-table-cell" data-th-text="${notice.operator}"></td>
			    <td class="layui-table-cell">
			    	<a class="layui-btn  layui-btn-xs" th:href="@{/index_page/notice/edit(id=${notice.id})}">编辑</a>
			    	<a class="layui-btn  layui-btn-xs"  
			    		data-th-onclick="'changNoticeStatus(' + ${notice.id} + ',' + ${notice.status} + ')'"
			    		data-th-text="${notice.status eq 1} ? '下架' : '上架'"></a>
			    	<a class="layui-btn  layui-btn-xs" data-th-if="${notice != null}"
			    		data-th-onclick="'deleteNotice(' + ${notice.id} + ')'">删除</a>
			    </td>
		    </tr>
	  	</tbody>
	</table>
	</div>
	<div id="pageContent"></div>
	<div style="height: 70px"></div>
</div>
  
</div>

<script th:src="@{/layui/jquery.min.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script>
//JavaScript代码区域
$(document).ready(function(){ 
	$(".layui-body").css({"left": "10px","top": "10px"});
}); 
var form;
layui.use(['layer', 'form', 'element'], function(){
	var layer = layui.layer;
	form = layui.form;
});

layui.use('laypage', function(){
	var laypage = layui.laypage;
  	var layer = layui.layer;
  
  	//执行一个laypage实例
  	laypage.render({
	  elem: 'pageContent'
	  ,count:[[${total}]] //数据总数，从服务端得到
	  ,curr: [[${pageIndex}]]
 		  ,limit: [[${pageSize}]]
	  ,layout:['count','prev', 'page', 'next','skip']
	  ,jump: function(obj, first){
		  console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
		  console.log(obj.limit); //得到每页显示的条数
	    //首次不执行
	   if(!first){
		   $("#pageIndex").val(obj.curr);
		   $("#pageSize").val(obj.limit);
	     // window.location.href = '/index_page/notice/list?pageIndex=' + obj.curr + "&pageSize=" + obj.limit;
		   $("#searchForm").submit();
	    }
	  }
	}); 
});
$("#searchForm").click(function() {
	$("#pageIndex").val('');
	$("#pageSize").val('');
});
function changNoticeStatus(id, status) {
	var tipMsg = status == 0 ? '确定上架么？' : '确定下架么？';
	layer.confirm(tipMsg, {btnAlign: 'c', title:'提示'}, function(index){
		var res = $.ajax({
			url:"/index_page/notice/change_status" 
			, data:"id=" + id + "&status=" + status
			, method:"post"
			, async:false
		});
		
		if(res.responseJSON.meta.code == 0)
			window.location.reload();
		else
			layer.msg(res.responseJSON.meta.message);
		
	});
}
function deleteNotice(noticeId) {
	layer.confirm('是否要删除此条内容？', {btnAlign: 'c', btn: ['删除', '取消'], title:'提示'}, function(index){
		
		$.ajax({
			url:"/index_page/notice/delete" 
			, data:"id=" + noticeId
			, method:"post"
			, async:false
		});
		window.location.reload();
	});
	
}
</script>
</body>
</html>